<?php get_header();wp_dequeue_script('jq-archive-script'); ?>
    <!--主内容区-->
    <div class="main-body mt-20">
        <div class="container d-flex">

            <?php
            global $wpdb;
            $parts_type = $wpdb->get_results("select * from parts_type order by type DESC,sort ASC");
            ?>
            <!--      平行菜单      -->
            <div class="pure-menu pure-menu-horizontal pure-menu-scrollable pure-menu-fixed" style="display:none;margin-top:70px;background-color: #e7e8ea">
                <ul class="pure-menu-list">
                    <?php foreach ($parts_type as $pt) {
                        if ($pt->type=='part'){ ?>
                            <li class="pure-menu-item item-id-<?php echo $pt->id; ?>">
                                <a href="javascript:void(0);" onclick="load_part(<?php echo $pt->id; ?>,'click')" class="pure-menu-link"><?php echo $pt->name; ?></a>
                            </li>
                        <?php }} ?>
                    <?php foreach ($parts_type as $pt) {
                        if ($pt->type=='gear'){ ?>
                            <li class="pure-menu-item item-id-<?php echo $pt->id; ?>">
                                <a href="javascript:void(0);" onclick="load_part(<?php echo $pt->id; ?>,'click')" class="pure-menu-link"><?php echo $pt->name; ?></a>
                            </li>
                        <?php }} ?>
                </ul>
            </div>

            <!--      垂直菜单      -->
            <div class="pure-menu custom-restricted-width pure-menu-vertical" style="display: none;">
                <ul class="pure-menu-list" style="padding-right:5px;">
                    <li class="pure-menu-heading" style="background-color: #ef6f2d;color: white;font-weight: 600;"> — 零件 — </li>
                    <?php foreach ($parts_type as $pt) {
                        if ($pt->type=='part'){ ?>
                            <li class="pure-menu-item item-id-<?php echo $pt->id; ?>">
                                <a href="javascript:void(0);" onclick="load_part(<?php echo $pt->id; ?>),'click'" class="pure-menu-link" style="font-weight: 500;"><?php echo $pt->name; ?></a>
                            </li>
                    <?php }} ?>
                    <li class="pure-menu-heading" style="background-color: #ef6f2d;color: white;font-weight: 600;"> — 装备 — </li>
                    <?php foreach ($parts_type as $pt) {
                        if ($pt->type=='gear'){ ?>
                            <li class="pure-menu-item item-id-<?php echo $pt->id; ?>">
                                <a href="javascript:void(0);" onclick="load_part(<?php echo $pt->id; ?>,'click')" class="pure-menu-link" style="font-weight: 500;"><?php echo $pt->name; ?></a>
                            </li>
                    <?php }} ?>
                </ul>
            </div>
            <!--      part-list      -->
            <div class="pure-g part-list">

<!--                <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>-->
<!--                <!-- 【横】长方形广告 -->
<!--                <ins class="adsbygoogle"-->
<!--                     style="display:block"-->
<!--                     data-ad-client="ca-pub-6243451787655828"-->
<!--                     data-ad-slot="4209566881"-->
<!--                     data-ad-format="auto"-->
<!--                     data-full-width-responsive="true"></ins>-->
<!--                <script>-->
<!--                    (adsbygoogle = window.adsbygoogle || []).push({});-->
<!--                </script>-->

                <!--Ajax动态添加内容-->

                <div class="spinner">
                    <div class="rect1"></div>
                    <div class="rect2"></div>
                    <div class="rect3"></div>
                    <div class="rect4"></div>
                    <div class="rect5"></div>
                </div>

                <p class="under-line"> - 别扯了，我们也是有底线的 - </p>

            </div>

        </div>

        <div style="clear: both;"></div>

    </div>


    <!--components-->
    <link rel='stylesheet' id='build-css'  href='<?php echo site_url(); ?>/wp-content/themes/jiangqie/css/purecss.css?ver=5.6' type='text/css' media='all' />
    <!--nolazy.js-->
    <script type='text/javascript' src='<?php echo site_url(); ?>/wp-content/themes/jiangqie/js/nLazy.js?ver=0.3'></script>

    <script type="text/javascript">
        var $ = jQuery.noConflict();//解除wordpress jquery限制

        base_resize_func();

        $(document).ready(function() {
            resize_func();

            if (window.innerWidth) winWidth = window.innerWidth;
            else if ((document.body) && (document.body.clientWidth)) winWidth = document.body.clientWidth;
            if(winWidth <= 773){
                $(".pure-menu-horizontal").show();
            }else{
                $(".pure-menu-vertical").show();
            }
        });

        function resize_func() {
            $(window).resize(function () {
               base_resize_func();
            });
        }

        function base_resize_func() {
            if ($(window).width() > 768){
                $(".pure-menu-vertical").show();
                $(".pure-menu-horizontal").hide();
                $(".part-list").css("margin-top","0");
            }else{
                $(".pure-menu-vertical").hide();
                $(".pure-menu-horizontal").show();
                $(".part-list").css("margin-top","55px");
            }

            _width = $(".part-info").width();

            $(".part-image").css("padding-bottom",_width);
        }


        // 异步加载配件清单
        // ======================

        var start = 0;
        var loadable = true;
        var current_type = 0;
        var request = $.post();

        $(document).ready(function () {
            $(".spinner").show();
            load_part(1,'auto');
        });

        //滑动到底部加载
        // scroll event
        $(window).scroll(function(){
            // scroll at bottom
            //滚动条所在位置的高度
            totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop());
            //当前文档高度   小于或等于   滚动条所在位置高度  则是页面底部
            if(($(document).height()) <= totalheight+200) {
                load_part(current_type,'auto');
            }
        });

        function load_part(type, entrance) {
            if(current_type == type){//同类目
                if(!loadable) return false;
                if(entrance!='auto'){
                    //auto：页面触发，click：点击触发
                    //如果是点击触发的，不加载
                    return false;
                }
            }else{//不同类目
                //停掉之前的请求
                request.abort();
                //添加样式
                $(".pure-menu-item").removeClass('pure-menu-active');
                $(".item-id-"+type).addClass('pure-menu-active');
                //如果是新分类,下标从0开始
                current_type = type;
                start = 0;
                //清除所有part_info元素
                $(".under-line").hide();
                $(".part-info").remove();
            }

            loadable = false;//同一时间只能一个在执行

            $(".spinner").show();
            request = $.post("/wp-admin/admin-ajax.php", {
                action: 'ajax_more_part',
                start: start,
                type: type
            }, function (data, status) {
                if(data.length > 0){
                    $(".spinner").hide();
                    $(".under-line").hide();
                    for (var i=0;i<data.length;i++) {
                        html = '<div class="pure-u-sm-1-1 pure-u-md-1-2 pure-u-lg-1-3 part-info">' +
                                    '<a target="_blank" href="'+data[i].info_url+'">' +
                                        '<div class="part-image nl-image" data-background="'+data[i].img+'"></div>' +
                                        '<div class="build-num"><img src="/wp-content/themes/jiangqie/images/drone.png">&nbsp;'+data[i].amount+'个相关配置</div>' +
                                        '<div class="part-name">'+data[i].name+'</div>' +
                                    '</a>' +
                                '</div>';
                        $(".spinner").before(html);
                    }
                    nlazy();//加载图片
                    if(data.length < 12){
                        //单独判断如果小于每页数量，则认为是最后一页了
                        $(".under-line").show();
                        loadable = false;
                    }else{
                        start += 1;
                        loadable = true;
                    }
                }else{
                    $(".spinner").hide();
                    $(".under-line").show();
                    loadable = false;
                }

            });
        }
    </script>

<?php get_footer(); ?>